<template>
  <div class="container">
    <el-card class="box-card">
      <div v-if="$route.query.id" slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 搜索添加标签区域 -->
      <el-row type="flex" justify="space-around">
        <!-- 搜索 -->
        <el-col :span="22">
          <el-form ref="formData" :model="formData" label-width="80px">
            <el-form-item label="标签名称">
              <el-input v-model="formData.tagName" placeholder="请输入标签名称" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formData.state" placeholder="请选择">
                <el-option v-for="item in enableState" :key="item.id" :label="item.value" :value="item.id">{{ item.value }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="search">
              <el-button size="small" @click="reset">清除</el-button>
              <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
            <el-form-item class="back">
              <el-button type="text" icon="el-icon-back" @click="$router.push('/subjects/list')">返回学科</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 添加 -->
        <el-col :span="2">
          <el-button size="small" type="success" icon="el-icon-edit" class="add" @click="addTag">新增标签</el-button>
        </el-col>
      </el-row>
      <!-- 消息提示 -->
      <div class="notice">
        <el-alert
          :title="`数据一共 ${counts} 条`"
          type="info"
          show-icon
          :closable="false"
        />
      </div>
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%" :header-cell-style="headerClass">
        <el-table-column type="index" label="序号" width="100px" />
        <el-table-column prop="subjectName" label="所属学科" />
        <el-table-column prop="tagName" label="标签名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" :formatter="formatter" />
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="tagState(scope.row)">
              <span v-if="scope.row.state=== 1">{{ '禁用' }}</span>
              <span v-if="scope.row.state=== 0">{{ '启用' }}</span>
            </el-button>
            <el-button type="text" :disabled="scope.row.state === 1" @click="editTag(scope.row.id)">修改</el-button>
            <el-button type="text" :disabled="scope.row.state === 1" @click="delTag(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        background
        :current-page="query.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes,jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <!-- 添加标签弹窗区域 -->
      <el-dialog
        v-if="showDialog"
        :title="isEdit? '编辑标签' : '新增标签'"
        :visible.sync="showDialog"
        width="30%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <tags-dialog
          :is-edit="isEdit"
          :tag-id="tagId"
          @close="showDialog = false"
          @update="updateList"
        />
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/tags'
import TagsDialog from '@/module-hmmm/components/tags-add.vue'

export default {
  name: 'Tags',
  components: {
    TagsDialog
  },
  filters: {
    // 创建日期格式化
    formatTime(date) {
      var json_date = new Date(date).toJSON()
      // const time =
      return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
  },
  data() {
    return {
      tagId: '', // 标签id
      isEdit: false, // 编辑状态
      showDialog: false, // 弹窗显示
      counts: 12,
      formData: {
        tagName: null,
        state: null
      },
      tableData: [], // 表格数据
      query: {
        page: 1,
        pagesize: 10,
        subjectID: this.$route.query.id || null
      },
      // 启用状态
      enableState: [
        {
          id: 1,
          value: '已启用'
        },
        {
          id: 0,
          value: '已禁用'
        }
      ]
    }
  },
  watch: {
    $route() {
      this.query.subjectID = this.$route.query.id // 获取传来的参数
      // 调用获取列表的方法
      this.getList() // 路由变化时就重新执行这个方法 更新传来的参数
    }
  },
  created() {
    // 调用获取列表的方法
    this.getList()
  },
  methods: {
    // 设置表格表头的样式
    headerClass() {
      return 'border-bottom:2px solid #e8e8e8; background:#fafafa;'
    },

    // 分页
    handleSizeChange(val) {
      this.query.pagesize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.getList()
    },

    // 获取列表
    async getList() {
      const query = { ...this.formData, ...this.query }
      const res = await list(query)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },

    // 对状态进行格式化
    formatter(row, column, cellValue, index) {
      const obj = this.enableState.find(item => item.id === Number(cellValue))
      return obj ? obj.value : '未知'
    },

    // 添加标签
    addTag() {
      this.isEdit = false
      this.showDialog = true
    },

    // 编辑标签
    editTag(id) {
      this.tagId = id
      this.showDialog = true
      this.isEdit = true
    },

    // 提交搜索表单
    async onSubmit() {
      const query = { ...this.formData, ...this.query }
      const res = await list(query)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },

    // 更新列表
    updateList() {
      this.showDialog = false
      this.getList()
    },

    // 清空表单
    reset() {
      this.formData = {
        tagName: '',
        state: null
      }
      this.getList()
    },

    // 删除标签
    async delTag(id) {
      const removeConfirm = await this.$confirm('是否确定删除此标签?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (removeConfirm === 'cancel') return this.$message('您已取消了删除')
      const res = await remove(id)
      if (res.status === 200) {
        this.$message.success('删除标签成功')
      }
      this.getList()
    },

    // 标签状态
    async  tagState(item) {
      const state = item.state === 0 ? 1 : 0
      const data = { state, id: item.id }
      const res = await changeState(data)
      if (res.status === 200) {
        this.$message.success('更改标签状态成功')
      }
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
 .container {
   margin: 10px 15px;

   .el-form-item  {
     display: inline-block;
   }

   .search {
     margin-left: -70px;
   }

   .back {
     float: right;
   }

   .add {
     margin-left: 10px;
   }

   .el-table {
     margin-top: 10px;
   }

   .el-pagination {
    float: right;
    margin: 15px 0;
   }
 }

::v-deep  .el-dialog__body {
    padding: 30px 20px 5px;
  }
</style>
